<template>
  <view class="container">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="title-section">
        <text class="page-title">商品评价</text>
      </view>
    </view>
    
    <!-- 评价概览 -->
    <view class="rating-summary">
      <view class="rating-score">
        <text class="score">4.8</text>
        <text class="full-score">/5.0</text>
      </view>
      <view class="rating-stars">
        <uni-rate :value="4.8" size="20" readonly color="#FF8C42" margin="4"></uni-rate>
      </view>
      <text class="rating-count">128条评价</text>
    </view>
    
    <!-- 评价筛选 -->
    <view class="filter-tabs">
      <view 
        v-for="tab in tabs" 
        :key="tab.value" 
        class="filter-tab"
        :class="{ active: activeTab === tab.value }"
        @click="activeTab = tab.value"
      >
        <text>{{ tab.label }}</text>
      </view>
    </view>
    
    <!-- 评价列表 -->
    <view class="review-list">
      <view v-for="review in filteredReviews" :key="review.id" class="review-item">
        <view class="review-header">
          <image class="avatar" :src="review.avatar" mode="aspectFill"></image>
          <view class="user-info">
            <text class="username">{{ review.username }}</text>
            <view class="rating-info">
              <uni-rate :value="review.rating" size="12" readonly color="#FF8C42" margin="2"></uni-rate>
              <text class="date">{{ review.date }}</text>
            </view>
          </view>
        </view>
        
        <text class="review-content">{{ review.content }}</text>
        
        <view class="review-images" v-if="review.images.length > 0">
          <image 
            v-for="(img, idx) in review.images" 
            :key="idx" 
            class="review-image" 
            :src="img" 
            mode="aspectFill"
          ></image>
        </view>
      </view>
    </view>
    
    <!-- 底部导航栏 -->
    <tab-bar :active="1"></tab-bar>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useUserStore } from '@/store/user';
import UserTypeManager from '@/components/user-type-manager.vue';
import TabBar from '@/components/tab-bar.vue';


const statusBarHeight = ref(0);
const activeTab = ref('all');

const tabs = [
  { label: '全部', value: 'all' },
  { label: '好评', value: 'good' },
  { label: '中评', value: 'medium' },
  { label: '差评', value: 'bad' },
  { label: '有图', value: 'hasImage' }
];

// 静态评价数据
const reviews = ref([
  {
    id: 1,
    username: '用户12345',
    avatar: '/static/avatars/avatar1.png',
    rating: 5,
    date: '2025-05-08',
    content: '商品质量非常好，包装也很精致，自动贩卖机购买非常方便，会继续回购！',
    images: ['/static/reviews/review1.jpg']
  },
  {
    id: 2,
    username: '购物达人',
    avatar: '/static/avatars/avatar2.png',
    rating: 4,
    date: '2025-05-07',
    content: '味道不错，价格合理，就是贩卖机出货时有点卡顿，希望改进',
    images: []
  },
  {
    id: 3,
    username: '零食爱好者',
    avatar: '/static/avatars/avatar3.png',
    rating: 5,
    date: '2025-05-05',
    content: '巧克力威化饼干非常好吃，甜而不腻，自动贩卖机购买很方便，上班路上就能买',
    images: ['/static/reviews/review3.jpg']
  },
  {
    id: 4,
    username: '尝鲜用户',
    avatar: '/static/avatars/avatar4.png',
    rating: 3,
    date: '2025-05-03',
    content: '薯片味道还可以，但感觉量有点少，性价比一般',
    images: []
  }
]);

// 筛选后的评价列表
const filteredReviews = computed(() => {
  switch (activeTab.value) {
    case 'good':
      return reviews.value.filter(review => review.rating >= 4);
    case 'medium':
      return reviews.value.filter(review => review.rating === 3);
    case 'bad':
      return reviews.value.filter(review => review.rating <= 2);
    case 'hasImage':
      return reviews.value.filter(review => review.images.length > 0);
    default:
      return reviews.value;
  }
});

// 获取状态栏高度
const getStatusBarHeight = () => {
  try {
    const systemInfo = uni.getSystemInfoSync();
    statusBarHeight.value = systemInfo.statusBarHeight || 0;
  } catch (e) {
    console.error('获取系统信息失败:', e);
    statusBarHeight.value = 0;
  }
};

getStatusBarHeight();
</script>

<style>
.container {
  padding-bottom: 120rpx;
  background-color: #FFF9F2;
  min-height: 100vh;
}

.page-header {
  padding: 30rpx;
  background-color: #FFFFFF;
  border-bottom: 1rpx solid #FFE6CC;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

/* 评价概览 */
.rating-summary {
  padding: 30rpx;
  background-color: #FFFFFF;
  margin: 20rpx;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #FFE6CC;
}

.rating-score {
  display: flex;
  align-items: baseline;
  margin-bottom: 10rpx;
}

.score {
  font-size: 48rpx;
  font-weight: bold;
  color: #FF8C42;
}

.full-score {
  font-size: 28rpx;
  color: #999999;
}

.rating-count {
  font-size: 24rpx;
  color: #666666;
  margin-top: 10rpx;
}

/* 筛选标签 */
.filter-tabs {
  display: flex;
  padding: 20rpx 30rpx;
  background-color: #FFFFFF;
  border-bottom: 1rpx solid #FFE6CC;
}

.filter-tab {
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  font-size: 26rpx;
  color: #666666;
  border-radius: 30rpx;
}

.filter-tab.active {
  background-color: #FFF0E0;
  color: #FF8C42;
}

/* 评价列表 */
.review-list {
  padding: 20rpx;
}

.review-item {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #FFE6CC;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
  background-color: #FFF0E0;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 6rpx;
}

.rating-info {
  display: flex;
  align-items: center;
}

.date {
  font-size: 22rpx;
  color: #999999;
  margin-left: 10rpx;
}

.review-content {
  font-size: 28rpx;
  color: #333333;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.review-images {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
}

.review-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  background-color: #FFF0E0;
}
</style>